<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
    <!-- 插件依赖 -->
    <link rel="stylesheet" href="lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" />
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="page_login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren open">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <form class="form-inline text-center">
                <div class="form-group">
                    <input type="text" class="form-control starttime" placeholder="开始日期">
                </div>
                <div class="form-group">
                    <label>至</label>
                    <input type="text" class="form-control endtime" placeholder="结束日期">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                </div>
                <button type="submit" class="btn btn-default">搜用户</button>
            </form>

            <div class="mb-4 mt-4">
                <a class="btn btn-primary btn-sm" href="#"><i class="glyphicon glyphicon-plus"></i>新增 </a>
                <a class="btn btn-success btn-sm" href="#"><i class="glyphicon glyphicon-ok"></i>启用</a>
                <a class="btn btn-warning btn-sm" href="#"><i class=" glyphicon glyphicon-minus-sign"></i>禁用</a>
                <a class="btn btn-danger btn-sm" href="#"><i class="glyphicon glyphicon-trash"></i>删除</a>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="check-all">
                            </th>
                            <th>编号</th>
                            <th>用户名</th>
                            <th>性别</th>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" value="1">
                            </td>
                            <td>1</td>
                            <td>admin21</td>
                            <td>男</td>
                            <td>韦小宝</td>
                            <td>15805136482</td>
                            <td><span class="label label-success">正常</span></td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i
                                            class="glyphicon glyphicon-pencil"></i></a>
                                    <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i
                                            class="glyphicon glyphicon-trash"></i></a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" value="2">
                            </td>
                            <td>2</td>
                            <td>admin21</td>
                            <td>男</td>
                            <td>韦小宝</td>
                            <td>15805136482</td>
                            <td><span class="label label-success">正常</span></td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i
                                            class="glyphicon glyphicon-pencil"></i></a>
                                    <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i
                                            class="glyphicon glyphicon-trash"></i></a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </main>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
     <!-- 插件依赖 -->
     <script src="lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
     <script src="lib/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 
     <script>
         var startime = $(".starttime").datetimepicker({
             //语言配置
             language: "zh-CN",
             //时间格式化
             format: "yyyy-mm-dd hh:ii",
             //选择完自动关闭
             autoclose: true,
             //出现今天按钮
             todayBtn: true,
             //今天高亮
             todayHighlight: true,
             startView: 2,
             minView: 0,
         });
         var endtime = $(".endtime").datetimepicker({
             //语言配置
             language: "zh-CN",
             //时间格式化
             format: "yyyy-mm-dd hh:ii",
             //选择完自动关闭
             autoclose: true,
             //出现今天按钮
             todayBtn: true,
             //今天高亮
             todayHighlight: true,
             startView: 2,
             minView: 0,
 
         });
         //监听事件
         startime.on('changeDate', function (ev) { endtime.datetimepicker('setStartDate', ev.date); });
         endtime.on('changeDate', function (ev) { startime.datetimepicker('setEndDate', ev.date); });
     </script>
</body>

</html>